<template>
    <el-container>
        <el-header>
            <cli-title-student></cli-title-student>
        </el-header>
        <el-main>
            <el-row class="center">
                <el-col style="width: 800px">
                    <live-video></live-video>
                </el-col>
                <el-col style="margin-left:50px; width: 400px">
                    <wxChat
                            :data="wxChatData"
                            :showShade="false"
                            contactNickname="老师"
                            :getUpperData="getUpperData"
                            :getUnderData="getUnderData"
                            :ownerAvatarUrl="ownerAvatarUrl"
                            :contactAvatarUrl="contactAvatarUrl"
                            :width="width">
                    </wxChat>
                </el-col>
            </el-row>
            <div style="margin-top: 100px"></div>
        </el-main>
        <el-footer>
            <page-footer></page-footer>
        </el-footer>
    </el-container>
</template>

<script>
    import CliTitleStudent from "../../components/base/cliTitleStudent";
    import liveVideo from "../../components/liveVideo";
    import pageFooter from "../../components/base/pageFooter";
    import wxChat from '../../components/chat/wxChat.vue'

    export default {
        name: "live",
        components: {wxChat, pageFooter, liveVideo, CliTitleStudent},
        data() {
            return {
                upperTimes: 0,
                underTimes: 0,
                upperId: 0,
                underId: 6,
                width: window.screen.width,
                ownerAvatarUrl: '../../assets/image/avatar1.png',
                contactAvatarUrl: '../../assets/image/avatar2.png',
                wxChatData: [
                    {
                        direction: 1,
                        id: 1,
                        type: 1,
                        content: '同学你好！',
                        ctime: new Date().toLocaleString()
                    },
                ]
            };
        },
        created() {
            this.initWidth();
        },
        methods: {
            initWidth() {
                var ua = navigator.userAgent;
                var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
                    isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
                    isAndroid = ua.match(/(Android)\s+([\d.]+)/),
                    isMobile = isIphone || isAndroid;
                //非移动端设置400px宽度，移动端是100%
                if (!isMobile) {
                    this.width = 400
                }
            },
            //向上滚动加载数据
            getUpperData() {
                var me = this;

                // 这里为模拟异步加载数据
                // 实际上你可能要这么写:
                // return axios.get('xxx').then(function(result){
                //     return result;  //result的格式需要类似下面resolve里面的数组
                // })
                return new Promise(function (resolve) {
                    setTimeout(function () {
                        //模拟加载完毕
                        if (me.upperTimes > 3) {
                            return resolve([]);
                        }

                        //加载数据
                        resolve([
                                // {
                                // direction: 2,
                                // id: me.upperId-1,
                                // type: 1,
                                // content: '向上滚动加载第 ' + me.upperTimes +' 条！',
                                // ctime: new Date().toLocaleString()
                                // },
                                // {
                                //     direction: 1,
                                //     id: me.upperId-2,
                                //     type: 1,
                                //     content: '向上滚动加载第 ' + me.upperTimes +' 条！',
                                //     ctime: new Date().toLocaleString()
                                // }
                            ]
                        )
                    }, 1000);
                    me.upperId = me.upperId + 2;
                    me.upperTimes++;
                })
            },
            getUnderData() {
                var me = this;
                //意义同getUpperData()
                return new Promise(function (resolve) {
                    setTimeout(function () {
                        //模拟加载完毕
                        if (me.underTimes > 3) {
                            return resolve([]);
                        }

                        //加载数据
                        resolve(
                            [
                                // {
                                // direction: 1,
                                // id: me.underId+1,
                                // type: 1,
                                // content: '向下滚动加载第 ' + me.underTimes +' 条！',
                                // ctime: new Date().toLocaleString()
                                // },
                                // {
                                //     direction: 2,
                                //     id: me.underId+2,
                                //     type: 1,
                                //     content: '向下滚动加载第 ' + me.underTimes +' 条！',
                                //     ctime: new Date().toLocaleString()
                                // }
                            ]
                        )
                    }, 1000);
                    me.underId = me.underId + 2;
                    me.underTimes++;
                })
            }
        }
    }
</script>

<style scoped>
    .center {
        width: 1300px;
        margin: 50px auto;
    }
</style>